<template>
  <view v-if="visible" class="the-modal" @click="close">
    <view class="the-modal-content"> 这是模态框 </view>
  </view>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    close() {
      this.visible = false;
    },
  },
};
</script>

<style>
.the-modal {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: 999999999;
}
.the-modal-content {
  background-color: white;
  width: 100%;
  height: 50%;
}
</style>